<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>主页</title>
  <%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
  %>
  <script type="text/javascript"
          src="${APP_PATH}/static/js/jquery-1.10.1.js"></script>
  <link
          href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
          rel="stylesheet">
  <script
          src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 搭建显示页面 -->
<div class="container">
  <%--员工更新模态框--%>
  <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">更新员工信息</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                  <p class="form-control-static" id="emp_update_static"></p>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="email_update_input" placeholder="empName@qq.com">
                  <span class="help-block"></span>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-10">
                  <label class="col-sm-2 control-label">gender</label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                  </label>
                </div>
              </div>
              <%--下拉框 根据数据库中的内容返回--%>
              <div class="form-group">
                <label class="col-sm-2 control-label">deptName</label>
                <div class="col-sm-4">
                  <select class="form-control" name="dId" id="dept_update_select">
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
          </div>
        </div>
      </div>
    </div>

  <%--添加员工信息模态框--%>
  <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">添加员工</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">empName</label>
              <div class="col-sm-10">
                <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">email</label>
              <div class="col-sm-10">
                <input type="text" name="email" class="form-control" id="email_add_input" placeholder="empName@qq.com">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10">
                <label class="col-sm-2 control-label">gender</label>
                <label class="radio-inline">
                  <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                </label>
                <label class="radio-inline">
                  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                </label>
              </div>
            </div>
            <%--下拉框 根据数据库中的内容返回--%>
            <div class="form-group">
              <label class="col-sm-2 control-label">deptName</label>
              <div class="col-sm-4">
                <select class="form-control" name="dId" id="dept_add_select">
                </select>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="emp_save">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 标题 -->
  <div class="row">
     <div class="col-md-12">
       <h1>SSM-CRUD</h1>
     </div>
  </div>

  <!-- 按钮 -->
  <div class="row">
     <div class="col-md-4 col-md-offset-8">
       <button class="btn btn-primary" id="emp_addModal_btn">新增</button>
       <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
     </div>
  </div>

  <!-- 显示表格数据 -->
  <div class="row">
     <div class="col-md-12">
        <table class="table table-hover" id="emps_table">
           <thead>
             <tr>
               <th>
                <input type="checkbox" id="check_all"/>
               </th>
               <th>#</th>
               <th>empName</th>
               <th>gender</th>
               <th>email</th>
               <th>deptName</th>
               <th>操作</th>
             </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
  </div>

  <!-- 显示分页信息 -->
  <div class="row">
    <!--分页文字信息  -->
    <div class="col-md-6" id="page_info_area"></div>
    <!-- 分页条信息 -->
    <div class="col-md-6" id="page_nav_area">
    </div>
  </div>

</div>
<script type="text/javascript">
    var totalRecord,currentPage;
    //发送ajax请求
    $(function () {
       to_page(1);
    });

    function to_page(pn) {
      //ajax请求
      $.ajax({
        //请求的地址
        url:"${APP_PATH}/emps",
        //请求那一页的数据
        data:"pn="+pn,
        type:"GET",
        //result 请求成功后得到的数据
        success:function (result) {
          //测试
          console.log(result);
          //解析数据显示员工信息
          build_emp_table(result);
          //解析显示分页信息
          build_page_info(result);
          //解析显示分页条信息
          build_page_nav(result);
        }
      });
    }

    //显示员工信息
    function build_emp_table(result) {
      //清空table表格
      $("#emps_table tbody").empty();
      //在result中将list中数据取出来
      var emps = result.extend.pageInfo.list;

      //将得到的数据遍历出来
      $.each(emps,function (index,item) {
        //测试
        //alert(item.empName)
        var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
        var empIdTd = $("<td></td>").append(item.empId);
        var empNameTd = $("<td></td>").append(item.empName);
        var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
        var emailTd = $("<td></td>").append(item.email);
        var deptNameTd = $("<td></td>").append(item.department.deptName);

        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
        //为编辑按钮添加一个自定义的属性，来表示当前员工id
        editBtn.attr("edit-id",item.empId);
        var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
        //为删除按钮添加一个自定义的属性来表示当前删除的员工id
        delBtn.attr("del-id",item.empId);
        var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
        //var delBtn =
        //append方法执行完成以后还是返回原来的元素
        $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_table tbody");
      });
    }

    //分页信息
    function build_page_info(result) {
      $("#page_info_area").empty();
      $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总\n" +result.extend.pageInfo.pages+ "页,总"+result.extend.pageInfo.total+"条记录");
      totalRecord = result.extend.pageInfo.total;
      currentPage = result.extend.pageInfo.pageNum;
    }

    //分页条信息
    function build_page_nav(result) {
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.extend.pageInfo.hasPreviousPage == false){
          firstPageLi.addClass("disabled");
          prePageLi.addClass("disabled");
        }else{
          //为元素添加点击翻页的事件
          firstPageLi.click(function(){
            to_page(1);
          });
          prePageLi.click(function(){
            to_page(result.extend.pageInfo.pageNum -1);
          });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.extend.pageInfo.hasNextPage == false){
          nextPageLi.addClass("disabled");
          lastPageLi.addClass("disabled");
        }else{
          nextPageLi.click(function(){
            to_page(result.extend.pageInfo.pageNum +1);
          });
          lastPageLi.click(function(){
            to_page(result.extend.pageInfo.pages);
          });
        }
        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

          var numLi = $("<li></li>").append($("<a></a>").append(item));
          if(result.extend.pageInfo.pageNum == item){
            numLi.addClass("active");
          }
          numLi.click(function(){
            to_page(item);
          });
          ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
      }

    //清空表单样式及内容
    function reset_form(ele){
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-error has-success");
        $(ele).find(".help-block").text("");
    }

    //添加员工信息
    $('#emp_addModal_btn').click(function () {
        //每次点击表单时 就表单中的数据重置
        reset_form("#empAddModal form");

        //发送ajax请求 到服务器 返回deptment的信息
        getDepts("#empAddModal select");

        $('#empAddModal').modal({
          backdrop:'static'
        })
    })

    //显示校验结果的提示信息
    function show_validate_msg(ele,status,msg){
      //清除当前元素的校验状态
      $(ele).parent().removeClass("has-success has-error");
      $(ele).next("span").text("");
      if("success"==status){
        $(ele).parent().addClass("has-success");
        $(ele).next("span").text(msg);
      }else if("error" == status){
        $(ele).parent().addClass("has-error");
        $(ele).next("span").text(msg);
      }
    }

    //校验表单数据
    function validate_add_form(){
        //1、拿到要校验的数据，使用正则表达式
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if(!regName.test(empName)){
          //alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
          show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
          return false;
        }else{
          show_validate_msg("#empName_add_input", "success", "");
        };

        //2、校验邮箱信息
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(email)){
          //alert("邮箱格式不正确");
          //应该清空这个元素之前的样式
          show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
          return false;
        }else{
          show_validate_msg("#email_add_input", "success", "");
        }
        return true;
    }

    //校验用户名是否可用
    $("#empName_add_input").change(function(){
      //发送ajax请求校验用户名是否可用
      var empName = this.value;
      $.ajax({
        url:"${APP_PATH}/checkuser",
        data:"empName="+empName,
        type:"POST",
        success:function(result){
          if(result.code==100){
            show_validate_msg("#empName_add_input","success","用户名可用");
            $("#emp_save_").attr("ajax-va","success");
          }else{
            show_validate_msg("#empName_add_input","error",result.extend.va_msg);
            $("#emp_save").attr("ajax-va","error");
          }
        }
      });
    });

    //点击保存员工信息
    $('#emp_save').click(function () {
        //显示校验结果的提示信息
        if(!validate_add_form()){
          return false;
        };
        //1、判断之前的ajax用户名校验是否成功。如果成功。
        if($(this).attr("ajax-va")=="error"){
          return false;
        }
        //发送ajax请求 保存员工信息 将模态框中填写的表达数据交给服务器进行保存
        $.ajax({
          url:'${APP_PATH}/emp',
          type:'POST',
          data:$('#empAddModal form').serialize(),
          success:function (result) {
            if(result.code == 100){
                 //员工保存成功；
                 //1、关闭模态框
                 $("#empAddModal").modal('hide');

                 //2、来到最后一页，显示刚才保存的数据
                 //发送ajax请求显示最后一页数据即可
                 to_page(totalRecord);
            }else{
                //显示失败信息
                //console.log(result);
                //有哪个字段的错误信息就显示哪个字段的；
                if(undefined != result.extend.errorFields.email){
                    //显示邮箱错误信息
                    show_validate_msg("#email_add_input", "error", result.extend.errors.email);
                }
                if(undefined != result.extend.errorFields.empName){
                    //显示员工名字的错误信息
                    show_validate_msg("#empName_add_input", "error", result.extend.errors.empName);
                }
            }
          }
        })
    });

    //查出所有的部门信息并显示在下拉列表中
    function getDepts(ele){
      //清空之前下拉列表的值
      $(ele).empty();
      $.ajax({
        url:"${APP_PATH}/depts",
        type:"GET",
        success:function(result){
          //{"code":100,"msg":"处理成功！",
          //"extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
          //console.log(result);
          //显示部门信息在下拉列表中
          //$("#empAddModal select").append("")
          $.each(result.extend.depts,function(){
            var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
            optionEle.appendTo(ele);
          });
        }
      });
    }

    //更新员工信息
    $(document).on("click",".edit_btn",function () {
        //在显示模态框之前 需要先要查询要修改的员工信息和部门信息
        getDepts("#empUpdateModal select");
        getEmp($(this).attr("edit-id"));
        //将员工Id给更新按钮
        $('#emp_update_btn').attr("edit-id",$(this).attr("edit-id"));
        //显示模态框
        $('#empUpdateModal').modal({
          backdrop:'static'
        })
    })

    //点击更新 ，更新员工信息
    $("#emp_update_btn").click(function () {
        //1、验证邮箱是否合法
        var email = $("#email_update_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(email)){
          //alert("邮箱格式不正确");
          //应该清空这个元素之前的样式
          show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
          return false;
        }else{
          show_validate_msg("#email_update_input", "success", "");
        }
        //2、发送ajax请求 执行更新操作
        $.ajax({
            url : '${APP_PATH}/emp/'+$(this).attr("edit-id"),
            type:'PUT',
            data:$("#empUpdateModal form").serialize(),
            success:function(result){
                //alert(result.msg);
                //1、关闭对话框
                $("#empUpdateModal").modal("hide");
                //2、回到本页面
                to_page(currentPage);
                console.log(currentPage)
          }
        })
    })

    //通过Id查询员工信息
    function getEmp(id) {
        //发送ajax请求 通过id查询员工信息
        $.ajax({
            url:'${APP_PATH}/emp/'+id,
            type:'GET',
            success:function (result) {
                //console.log(result)
                var empData = result.extend.emp;
                $("#emp_update_static").text(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModal input[name=gender]").val([empData.gender])
                $("#empUpdateModal select").val([empData.dId]);
            }
        })
    }


    //完成全选/全不选功能
    $("#check_all").click(function(){
        $(".check_item").prop("checked",$(this).prop("checked"));
    });

    //check_item
    $(document).on("click",".check_item",function(){
        //判断当前选择中的元素是否5个
        var flag = $(".check_item:checked").length==$(".check_item").length;
        $("#check_all").prop("checked",flag);
    });

    //通过ID单个删除员工信息
    $(document).on("click",".delete_btn",function () {
      var empName = $(this).parents("tr").find("td:eq(2)").text();
      var empId = $(this).attr("del-id");
      if(confirm("确认要删除"+empName+"吗")){
        //如果确认则发送ajax请求
        $.ajax({
          url:'${APP_PATH}/emp/'+empId,
          type:"DELETE",
          success:function (result) {
            alert(result.msg);

            //返回当前页面
            to_page(currentPage);
          }
        });
      }
    })

    //点击全部删除，就批量删除
    $("#emp_delete_all_btn").click(function(){
        var empNames = "";
        var del_idstr = "";
        $.each($(".check_item:checked"),function(){
          //this
          empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
          //组装员工id字符串
          del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
        });
        //去除empNames多余的,
        empNames = empNames.substring(0, empNames.length-1);
        //去除删除的id多余的-
        del_idstr = del_idstr.substring(0, del_idstr.length-1);
        if(confirm("确认删除【"+empNames+"】吗？")){
          //发送ajax请求删除
          $.ajax({
            url:"${APP_PATH}/emp/"+del_idstr,
            type:"DELETE",
            success:function(result){
              alert(result.msg);
              //回到当前页面
              to_page(currentPage);
            }
          });
        }
    });

</script>
</body>
</html>